<!--个人信息详情页  ————————  客户经理、高管及销售主管可查看-->
<template>
  <div id="personalInfo">
    <!--         Breadcrumbs -->
    <div class="breadcrumbs" style="margin: 0px;padding-top: 20px;">
      <ul>
        <li class="home"><a href="index.html" title="Go to Home Page"><strong style="font-size: 18px;">我的信息</strong></a>
        </li>
      </ul>
    </div>
    <article class="col-main">
      <div class="my-account">
        <div class="dashboard" style="margin-top: 20px; height: 673px;">
          <!--个人信息头部-->
          <div style="padding-left: 30px; height: 70px; margin-top: -20px;">
            <h3>我的信息
              <span style="font-size: 12px; color: #AAAAAA;">{{ staff.staffName }}{{staff.staffSex ==1 ? '先生' : '女士'}}</span>
            </h3>
          </div>
          <!--分隔线-->
          <div style="width: 110%; height: 0.5px; background-color: #eee; margin-top: -24px; margin-left: -24px;"></div>
          <!--个人信息详情-->
          <div style="height: 430px;padding-left: 200px; padding-top: 50px; font-size: 20px;">
            <form>
              <input type="hidden" name="userid">
              <ul style="list-style-type: none;">
                <li>邮箱:<span style="padding-left: 20px;">{{staff.staffEmail}}</span></li>
                <li style="padding-top: 30px;">真实姓名:<span style="padding-left: 20px;">{{staff.staffName}}</span></li>
                <li style="padding-top: 30px;">电话:<span style="padding-left: 20px;">{{staff.staffTel}}</span></li>
                <li style="padding-top: 30px;">性别:<span style="padding-left: 20px;">
                  {{staff.staffSex ==1 ? '男' : '女'}}
                </span></li>
                <li style="padding-top: 30px;">生日:<span style="padding-left: 20px;">{{ staff.staffBirth }}</span></li>
                <li style="padding-top: 30px;">职位:<span style="padding-left: 20px;" v-for="(role,index) in roles">{{role}} </span></li>
                <li style="padding-top: 30px;">状态:<span style="padding-left: 20px;">{{staff.staffState}}</span></li>
              </ul>
            </form>
          </div>

          <br>
          <br>
          <br><br>
          <!--修改按钮-->
          <div class="text-center">

            <router-link to="UpdatePersonalInfo" class="btn btn-primary">修改我的信息</router-link>
          </div>
        </div>
      </div>
    </article>
  </div>
</template>

<script>

export default {
  name: "PersonalInf",
  data(){
    return {
      staff:{

      },
      roles:{}
    }
  },
  methods:{
    getStaff(){
      this.staff = this.$store.getters.getStaff;
    },
    getRole(){
      // console.log(this.staff)
      this.$axios.get("/role/loadmyrole",{
        params:{
          staffEmail: this.staff.staffEmail
        }
      }).then(
        res =>{
          this.roles=res.data.data;
          localStorage.setItem("role",res.data.data);
        }
      )
    }
  },
  created() {
    this.getStaff();
    this.getRole();
  }
}
</script>

<style scoped>

</style>
